<%@ page language="java" session="true" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../common/framework/header.jsp" />
<link href="${pageContext.request.contextPath}/static/plugin/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<style type="text/css">
.layui-layer-iframe .layui-layer-btn .layui-layer-btn1 {
    background-color: rgb(46, 141, 237);
    color: rgb(255, 255, 255);
    border-color: rgb(72, 152, 213);
}
</style>
	<div id="container"
		class="effect aside-float aside-bright mainnav-lg navbar-fixed mainnav-fixed aside-fixed">

		<jsp:include page="../common/framework/topper.jsp" />
		<div class="boxed">
			<%--=======================  页面主体内容  ============================--%>
			<div id="content-container">
				<div class="wrappers">
					<%--=========================  页面标题  ==========================--%>
					<div id="page-title">
						<p class="page-header text-overflow table-header">
							测试资源管理&nbsp;&nbsp;<small>查看和管理可以用于执行测试的资源信息，包括接口、功能和SSH等类型。详细说明请参考
							<a href="http://confluence.paas.sinopec.com/pages/viewpage.action?pageId=11343322#id-使用手册-_Toc471811815" target="_blank">&lt;使用手册&gt;</a></small>
						</p>
					</div>
					<ol class="breadcrumb">
						<li><a href="#">资源管理</a></li>
						<li class="active">测试资源</li>
					</ol>
					<div id="page-content">
						<div class="panel">
							<div class="panel-body pad-top-no">
								<div id="toolbar">
									<form id="search_form" class="form-inline" autocomplete="off">
										<a class="btn btn-primary pull-right" onclick="addApp()" style="margin-top: 2px;margin-left:15px;">
											<i class="fa fa-cog"></i> 机房管理
										</a>
										<a class="btn btn-primary pull-right" id="insert"  style="margin-top: 2px;">
											<i class="fa fa-plus"></i> 添加
										</a>

									</form>
								</div>
                                  <table id="sysNumber" class="table" data-single-select="true" data-toolbar="#toolbar" data-show-refresh="true"
               						data-show-toggle="true" data-show-columns="true"
               						 data-buttons-class="hover-primary">
                                      <thead>
								        <tr>
								            <th data-field="" data-checkbox="true"></th>
								            <th data-field="resourceName">资源名称</th>
								            <th data-field="resourceIP" >资源IP</th>
								            <th data-field="resourceType" >资源类型</th>
								            <th data-field="state" >状态</th>
								            <th data-field="description" >占用情况</th>
								            <th data-field="stationName" >所属机房</th>
								            <th data-field="labelName" >标签</th>
								            <th data-align="center" data-width="140" data-formatter="pref_btns">操作</th>
								        </tr>
								    </thead>
                                  </table>
							</div>
						</div>

			</div>
		</div>
	</div>

		<%--=========================  过程可视化消息栏  ==========================--%>
		<jsp:include page="../common/framework/aside.jsp" />

		<%--=========================  左侧菜单  ==========================--%>
		<jsp:include page="../common/framework/lefter.jsp" />

	</div>

	<%--=========================  页面底部版权信息  ==========================--%>
	<jsp:include page="../common/framework/footer.jsp" />
	<%--=========================  选择皮肤功能  ==========================--%>
	<jsp:include page="../common/framework/page-set.jsp" />
</div>
	<div id="floating-top-right" class="floating-container"></div>
<%--===================================================--%>
<%-- END OF CONTAINER --%>

<jsp:include page="../common/framework/script.jsp" />
	<script src="${pageContext.request.contextPath}/static/js/common/bootdatatable.init.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugin/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>


	<script type="text/javascript">


$(function() {
	//加载表格
	$('#sysNumber').bootdatagrid(
			"${pageContext.request.contextPath}/static/plugin/bootstrap-table/staticData/testResource.json", {
				pagination : true,
				pageNumber : 1,
				pageSize : 10,
				dataType:'json',
				singleSelect : false,
				striped : true,
				clickToSelect : true
	});

})
function invoiceFormatter(value,row,index){
	return 'ID '+value;
}
function pref_btns(value,row,index){
	var btns = '';
	btns += '<a class="btn-table-cell" onclick="addOrEditResource('+index+','+row.resourceType+');">编辑</a>';
	btns += ' | <a class="btn-table-cell" data-toggle="tooltip" data-container="body" data-placement="top" title="日志日志">删除</a>';
	btns += ' | <a class="btn-table-cell" data-toggle="tooltip" data-container="body" data-placement="top" title="日志日志">资源监控</a>';
	return btns;
}

function tablebtnclick(e){
	Alert.success($(e).text());
}

//添加按钮
$("#insert").click(function(){
	var index = -1;
	addOrEditResource(index);
});

var width = $(window).width()*0.25;
var height = $(window).height()*0.16;

//添加或编辑资源事件
function addOrEditResource(index,resourceType){
	flag = index;
	layer.open({
		type : 2,
		title : (flag != -1) ? '编辑测试资源' : '添加测试资源',
		fix : true,
		scrollbar : false,
		area : [ '820px', '550px' ],
// 		offset: [height, width],
		shift : 2,
		content : '${pageContext.request.contextPath}/addOrEditTestResource',
		btn: ['部署', '确定', '取消'],
			yes : function(index, layer) {
	            var iframeWin = layer.find('iframe')[0];
	            iframeWin.contentWindow.deploy();
	        },
	        btn2:function(index, layer) {
	        	var iframeWin = layer.find('iframe')[0];
	        	iframeWin.contentWindow.submit();
	        	return false;
	        },
	        btn3:function(index, layer) {
	        	var iframeWin = layer.find('iframe')[0];
	        	iframeWin.contentWindow.closeLayer();
	        },
		success: function(layero, index){
			if(resourceType != 6 && resourceType != 2){
				$('.layui-layer-btn>.layui-layer-btn0').addClass('hidden');
        	}
			if(!$('.layui-layer-title').has('span').length){
				 $(".layui-layer-title").prepend("<span class='glyphicon glyphicon-th-large' ></span>&nbsp;");
			 }
		  },
		end : function(){

		}
	});
};
</script>
</body>
</html>

